<template>

  <div>
    <div style="margin-bottom: 15px; text-align: left;">
      <el-tag type="info">
        提示：此页面运营人员无需操作，由开发人员及模型设计人员操作
      </el-tag>
    </div>
    <div style="margin-bottom: 15px; text-align: right;">
      <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
      <!-- <el-button type="primary" icon="el-icon-refresh" @click="getActionList">刷新</el-button> -->
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column prop="id" label="ID" align="center" width="80" />
      <el-table-column prop="name" label="动作名称" align="center" />
      <el-table-column prop="key" label="键名" align="center" />
      <el-table-column prop="action" label="动作文件" align="center" />
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px" @close="handleCancel">
      <el-form ref="actionForm" :model="formData" :rules="rules" label-width="100px">
        <el-form-item label="动作名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入动作名称" />
        </el-form-item>
        <el-form-item label="键名" prop="key">
          <el-input v-model="formData.key" placeholder="请输入键名" />
        </el-form-item>
        <el-form-item label="动作文件" prop="action">
          <el-input v-model="formData.action" placeholder="请输入动作文件名，如：alistar_attack1.anm" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" :loading="submitting" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getActionList, saveAction, deleteAction } from '../../../libs/api'

export default {
  name: 'XiaoqiuAction',
  data() {
    return {
      tableData: [],
      loading: false,
      dialogVisible: false,
      dialogTitle: '新增动作',
      submitting: false,
      formData: {
        id: null,
        name: '',
        key: '',
        action: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入动作名称', trigger: 'blur' }
        ],
        key: [
          { required: true, message: '请输入键名', trigger: 'blur' }
        ],
        action: [
          { required: true, message: '请输入动作文件', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getActionList()
  },
  methods: {
    // 获取动作列表
    getActionList() {
      this.loading = true
      getActionList({}).then(res => {
        console.log(res)
        if (res && res.code === 1) {
          // API返回的data是数组
          if (Array.isArray(res.data)) {
            this.tableData = res.data || []
          } else {
            // 兼容其他可能的返回格式
            this.tableData = res.data.data || res.data.list || []
          }
        } else {
          this.$message.error(res.msg || '获取动作列表失败')
          this.tableData = []
        }
      }).catch(err => {
        console.error('获取动作列表失败:', err)
        this.$message.error('获取动作列表失败')
        this.tableData = []
      }).finally(() => {
        this.loading = false
      })
    },
    // 新增
    handleAdd() {
      this.dialogTitle = '新增动作'
      this.formData = {
        id: null,
        name: '',
        key: '',
        action: ''
      }
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.actionForm && this.$refs.actionForm.clearValidate()
      })
    },
    // 编辑
    handleEdit(row) {
      this.dialogTitle = '编辑动作'
      this.formData = {
        id: row.id,
        name: row.name,
        key: row.key,
        action: row.action
      }
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.actionForm && this.$refs.actionForm.clearValidate()
      })
    },
    // 提交
    handleSubmit() {
      this.$refs.actionForm.validate((valid) => {
        if (!valid) return

        this.submitting = true
        saveAction(this.formData).then(res => {
          if (res && res.code === 1) {
            this.$message.success(this.formData.id ? '修改成功' : '新增成功')
            this.dialogVisible = false
            this.getActionList()
          } else {
            this.$message.error(res.msg || '保存失败')
          }
        }).catch(err => {
          console.error('保存失败:', err)
          this.$message.error('保存失败')
        }).finally(() => {
          this.submitting = false
        })
      })
    },
    // 取消
    handleCancel() {
      this.dialogVisible = false
      this.formData = {
        id: null,
        name: '',
        key: '',
        action: ''
      }
      this.$nextTick(() => {
        this.$refs.actionForm && this.$refs.actionForm.clearValidate()
      })
    },
    // 删除
    handleDelete(row) {
      this.$confirm(`确定要删除动作"${row.name}"吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAction({ id: row.id }).then(res => {
          if (res && res.code === 1) {
            this.$message.success('删除成功')
            this.getActionList()
          } else {
            this.$message.error(res.msg || '删除失败')
          }
        }).catch(err => {
          console.error('删除失败:', err)
          this.$message.error('删除失败')
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  }
}
</script>

<style scoped>
</style>

